<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bootstrap Material Admin</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <link rel="shortcut icon" href="./img/logo.png" type="image/png">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/toastr.css">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/toastr.js"></script>

    <style>
        #body{
            position: relative;
        }
        #toast-container{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-33%,-100%);
        }
    </style>

    <script>
        /* function testTips() {
            toastr.options = {
                // "closeButton": true,
                // "debug": false,
                // "positionClass": "toast-top-right",
                // "onclick": null,
                // "showDuration": "300",
                // "hideDuration": "1000",
                "timeOut": 2000,
                // "extendedTimeOut": "1000",
                // "showEasing": "swing",
                // "hideEasing": "linear",
                // "showMethod": "fadeIn",
                // "hideMethod": "fadeOut"
            }
            console.log(toastr);
            toastr.success("测试测试测试测试测试");
            toastr.info("success2");
            toastr.warning("success3");
            toastr.error("success4");
            location.href = "./home.html";
        } */

        function doLogin() {
            var name=$("#login-username").val().trim();
            var pass=$("#login-password").val().trim();
            if (name&&pass) {
                // console.log(pass);
                let params = $("#loginFrom").serializeArray();
                // console.log(params);
                $.ajax({
                    url: './server/login.php',
                    type: 'post',
                    dataType: 'json',
                    data: params
                }).done((result)=>{
                    console.log(result);
                    if (result.data.status==1) {
                        if(result.success){
                            // console.log("登录成功");
    
                            // console.log(result);
                            // 登录成功
                            location.href = "./home.html";
                            return;
                        }
                    }
                    toastr.error("登录失败");
                });
            }else{
                toastr.warning("用户名或密码不能为空");
                console.log("错误");
            }

        }
    </script>
</head>

<body>
    <div class="page login-page">
        <div class="container d-flex align-items-center">
            <div class="form-holder has-shadow">
                <div class="row">
                    <!-- Logo & Information Panel-->
                    <div class="col-lg-6">
                        <div class="info d-flex align-items-center">
                            <div class="content">
                                <div class="logo">
                                    <h1>欢迎登录</h1>
                                </div>
                                <p>itany课程视频管理</p>
                            </div>
                        </div>
                    </div>
                    <!-- Form Panel    -->
                    <div class="col-lg-6 bg-white">
                        <div class="form d-flex align-items-center">
                            <div class="content">
                                <form method="get" action="./home.html" class="form-validate" id="loginFrom">
                                    <div class="form-group">
                                        <input id="login-username" type="text" name="username" required
                                            data-msg="请输入用户名" placeholder="用户名" value="" class="input-material">
                                    </div>
                                    <div class="form-group">
                                        <input id="login-password" type="password" name="password" required
                                            data-msg="请输入密码" placeholder="密码" class="input-material">
                                    </div>
                                    <button id="login" type="button" class="btn btn-primary" onclick="doLogin()">登录</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>